<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // size属性
    const map = new Map()
    map.set('a', 1)
    map.set('b', 2)
    map.set('c', 3)
    
    // 遍历key
    for (let key of map.keys()) {
      console.log(key, 'key');
    }

    // 遍历value
    for (let value of map.values()) {
      console.log(value, 'value');
    }

    // 遍历entries
    for (let [key, value] of map.entries()) {
      console.log(key, 'key');
      console.log(value, 'value');
    }

    // 等同于使用
    // map[Symbol.iterator] === map.entries
    for (let [key, value] of map) {
      console.log(key, 'key');
      console.log(value, 'value');
    }

    // 转化为数组
    const keys  = [...map.keys()]
    const values  = [...map.values()]
    const arr  = [...map.entries()]
    const arr2  = [...map]
    console.log(keys, 'keys');
    console.log(values, 'values');
    console.log(arr, 'arr');
    console.log(arr2, 'arr2');

    // 结合数组的filter方法生成新的map
    const map1 = new Map([...map].filter((v, k) => k < 2))
    console.log(map1, 'map1');

    // 结合数组的map方法生成新的map
    const map2 = new Map([...map].map((k, v) => [v * 2, '_' + k]))
    console.log(map2, 'map2');

    // map数据结构有forEach方法，可以用来实现遍历
    const obj = {
      name: '1', 
      fn () {console.log(1)}
    }
    // map第二个参数用来指定this，this就是obj，注意，这里不能是箭头函数，否则this是window
    map.forEach(function (value, key, m) {
      console.log(value, key, m, 'item, index, m');
      this.fn()
    }, obj)
  </script>
</body>
</html>